<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <!-- 顶部卡片 -->
    <div class="top-card"  >
      <div class="icon-wrap">
        <!-- 封面 -->
        <img :src="topcardlist.coverImgUrl" alt=""   />
      </div>
      <div class="content-wrap">
        <div class="tag"  @click="toPlaylist(topcardlist.id)">精品歌单</div>
        <!-- 标题 -->
        <div class="title">
          {{ topcardlist.name }}
        </div>
        <!-- 介绍 -->
        <div class="info">
          {{ topcardlist.description }}
        </div>
      </div>
      <!--  背景 -->
      <img :src="topcardlist.coverImgUrl" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span
          class="item"
          :class="{ active: tag == '全部' }"
          @click="tag = '全部'"
          >全部</span
        >
        <span
          class="item"
          :class="{ active: tag == '欧美' }"
          @click="tag = '欧美'"
          >欧美</span
        >
        <span
          class="item"
          :class="{ active: tag == '华语' }"
          @click="tag = '华语'"
          >华语</span
        >
        <span
          class="item"
          :class="{ active: tag == '流行' }"
          @click="tag = '流行'"
          >流行</span
        >
        <span
          class="item"
          :class="{ active: tag == '说唱' }"
          @click="tag = '说唱'"
          >说唱</span
        >
        <span
          class="item"
          :class="{ active: tag == '摇滚' }"
          @click="tag = '摇滚'"
          >摇滚</span
        >
        <span
          class="item"
          :class="{ active: tag == '民谣' }"
          @click="tag = '民谣'"
          >民谣</span
        >
        <span
          class="item"
          :class="{ active: tag == '电子' }"
          @click="tag = '电子'"
          >电子</span
        >
        <span
          class="item"
          :class="{ active: tag == '轻音乐' }"
          @click="tag = '轻音乐'"
          >轻音乐</span
        >
        <span
          class="item"
          :class="{ active: tag == '影视原声' }"
          @click="tag = '影视原声'"
          >影视原声</span
        >
        <span
          class="item"
          :class="{ active: tag == 'ACG' }"
          @click="tag = 'ACG'"
          >ACG</span
        >
        <span
          class="item"
          :class="{ active: tag == '怀旧' }"
          @click="tag = '怀旧'"
          >怀旧</span
        >
        <span
          class="item"
          :class="{ active: tag == '治愈' }"
          @click="tag = '治愈'"
          >治愈</span
        >
        <span
          class="item"
          :class="{ active: tag == '旅行' }"
          @click="tag = '旅行'"
          >旅行</span
        >
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div
            class="item"
            v-for="(item, index) in tabitemlist"
            :key="index"
            ref="tabitemlist"
            @click="toPlaylist(item.id)"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{ item.playCount }}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <!-- total:总条数
     current-page 当前页
     page-size 每页多少条数  -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios"; 
export default {
  name: "recommend",
  components: {},
  data() {
    return {
      topcardlist: {},
      tag: "全部",
      tabitemlist: [],
      // 总条数
      total: this.total,
      // 页码
      page: 1
    };
  },
  created() {
    axios({
      url: "https://autumnfish.cn/top/playlist/highquality",
      method: "get",
      params: {}
    }).then(res => {
      /*   console.log(res) */
      this.topcardlist = res.data.playlists[0];
         //处理播放次数
      for(let i=0;i<this.tabitemlist.length;i++){
        if(this.tabitemlist[i].playCount>10000){
          this.tabitemlist[i].playCount=parseInt(this.tabitemlist[i].playCount/10000)+'万'
        }
      }
    });
    /*  歌单列表 */
    axios({
      url: "https://autumnfish.cn/top/playlist/",
      method: "get",
      params: {
        limit: 10,
        offset: 0,
        cat: this.tag
      }
    }).then(res => {
      /* console.log(res) */
      //获取总条数
      (this.total = res.data.total),
        /*   console.log(this.total)  */
        (this.tabitemlist = res.data.playlists);
           for(let i=0;i<this.tabitemlist.length;i++){
        if(this.tabitemlist[i].playCount>10000){
          this.tabitemlist[i].playCount=parseInt(this.tabitemlist[i].playCount/10000)+'万'
        }
      }
    });
  },
  watch: {
    tag() {
      //修改页码
      this.page = 1;
      //topcard顶部的精品歌单
      axios({
        url: "https://autumnfish.cn/top/playlist/highquality",
        method: "get",
        params: {
          cat: this.tag
        }
      }).then(res => {
        /*   console.log(res.data.playlists); */
        this.topcardlist = res.data.playlists[0];
      });
      /*  歌单列表 */
      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: 10,
          cat: this.tag,
          offset: 0
        }
      }).then(res => {
        /* console.log(res) */
        this.tabitemlist = res.data.playlists;
        for(let i=0;i<this.tabitemlist.length;i++){
        if(this.tabitemlist[i].playCount>10000){
          this.tabitemlist[i].playCount=parseInt(this.tabitemlist[i].playCount/10000)+'万'
        }
      }
      });
    }
  },
  methods: {
    //页码改变事件
    handleCurrentChange(val) {
      /*   console.log(`当前页: ${val}`);  */
      //保存页码
      this.page = val;
      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: 10,
          cat: this.tag,
          offset: (this.page - 1) * 10
        }
      }).then(res => {
        /* console.log(res) */

        this.tabitemlist = res.data.playlists;
      });
    },
     // 去歌单详情页
    toPlaylist(id) {
      // 跳转并携带数据即可
      this.$router.push(`/playlist?q=${id}`);
    },
  }
};
</script>
<style >
</style>
